<template>
  <div class="content_box">
    <!-- 房间图片 -->
    <div class="top_img" @click="previewImage(msg.roomImg)">
      <van-image
        width="100%"
        height="450rpx"
        fit="cover"
        lazy-load
        :src="msg.roomImg && msg.roomImg.length?msg.roomImg[0]:''"
      />
      <div class="dots">
        <img mode="widthFix" src="/static/images/more_img.png" alt="" />
        {{msg.roomImg?msg.roomImg.length:0}}
      </div>
    </div>
    <!-- 房间信息 -->
    <div class="room_msg">
      <div class="msg">
        <div class="left">
          <p class="name">{{msg.roomName}} ({{msg.roomTypeName}})</p> 
          <div class="label_box">
            <p v-for="(child,i) in msg.labelVoList" :key="i">{{child.labelName}}</p>
          </div>
        </div>
        <div class="right" @click="onGuideTap">
          <img mode="widthFix" src="/static/images/dh.png" alt="" />
          <p>到这去</p>
        </div>
      </div>
      <div class="price_box">
        <div class="price">
          <p class="old">vip<span>￥{{msg.price}}</span>/小时</p>
          <p class="new">现价￥{{msg.price}}/小时</p>
        </div>
      </div>
    </div>

    <!-- 预约时段 -->
    <div class="time_slot_box">
      <div class="title_box">
        <p class="title">预约时段</p>
        <div class="right">
          <div>
            <p class="blue"></p>
            不可预约
          </div>
          <!-- <div>
            <p class="disable"></p>
            已消耗
          </div> -->
          <div>
            <p class="none"></p>
            可预约
          </div>
        </div>
      </div>
      
      <!-- <div class="showCont">
        <div
          v-for="(its, inx) in msg.showTime"
          :class="
            its.status == 1 ? 'noTt' : its.status == 2 ? 'hasTt' : 'isTt'
          "
          :key="inx"
        ></div>
      </div> -->
      <div class="time_slot">
        <div class="nr to_nr">
          <!-- <p class="lx"></p> -->
          <!-- <img class="lx" src="/static/images/room_sjx5.png" alt=""> -->
          <div
            v-for="(its, inx) in msg.showTime"
            :class="its.status == 2 || its.status == 1? 'noTt' :'isTt'"
            :key="inx"
          ></div>
          <p :class="isMan?'sjx sjx_on':'sjx'"></p>
        </div>
        <div class="nr bottom_nr">
          <div
            v-for="(its, inx) in msg.showTime"
            :class="its.status == 2 || its.status == 1 ? 'noTt1' :'isTt1'"
            :key="inx"
          ></div>
          <p :class="isMan?'sjx sjx_on':'sjx'"></p>
        </div>
      </div>
      <div class="showNum">
        <div v-for="(its, inr) in msg.showTime" :key="inr">
          {{ its.key % 2 == 0 ? its.key : "" }}
        </div>
      </div>
    </div>

    <!-- 房间介绍 -->
    <div class="room_jieshao" :style="{paddingBottom:isIphoneXnum+40+'px'}">
      <div class="title_box">
        <p class="name">房间介绍</p>
        <div class="line_box">
          <p class="line"></p>
          <p class="text_t">VENUE SELECTION</p>
          <p class="line"></p>
        </div>
      </div>
      <van-image
        width="100%"
        height="360rpx"
        fit="cover"
        lazy-load
        :src="msg.roomImg && msg.roomImg.length?msg.roomImg[0]:''"
      />
      <p class="text">房间介绍</p>
      <p class="text1">棋牌室预约以小程序预约为准，预订之前请确认所选择的包厢和预订时间无误。进入棋牌室请勿喧闹影响他人！！</p>
      <p class="text1">1、订单生成后，自动锁定本包厢时段；</p>
      <p class="text1">2、如因自身原因于订单开始消费前取消：距开始时间一小时以上，收取10%平台调度费用；一小时以内，收取四小时最低消费</p>
      <p class="text1">3、如因自身原因在消费中提前结束订单：扣除四小时最低消费后退回</p>
      <p class="text1">4、包厢禁止从事黄赌毒行为； </p>
      <p class="text1">5、包厢配有自助贩卖机，零食及饮料可至售货机自行购买;</p>
      <p class="text1">【注意事项】</p>
      <p class="text1">这里是一个社交私密共享空间,我们提倡「不给人别人添麻烦」的使用理念，请您务必遵守规则，帮我们一起维护好空间的环境设施，谢谢。</p>
      <p class="text1">一、关于声音</p>
      <p class="text1">在棋牌室内，请勿高声喧哗，使用期间内不宜吵闹，再大的嗓门也比不上发自内心的抒发。</p>
      <p class="text1">二、关于环境</p>
      <p class="text1">在场馆内，所有物品都需要大家的细心维护，请勿随意涂鸦，避免不文明不卫生的行为;一起构建更友好的消费体验空间。</p>
      <p class="text1">【特别声明】</p>
      <p class="text1">棋牌室保留对所有规则的最终解释权,如遇不遵守场馆规则的行为影响到他人的，我们有权停止您的体验，谢谢理解配合！</p>
    </div>

    <!-- 底部按钮 -->
    <div class="anniu_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="anniu" @click="toTimeSlot">立即预定</div>
    </div>

    <!-- 右边浮窗 -->
    <div class="right_flex">
      <button class="share" open-type="share">
        <div class="box">
          <img src="/static/images/room_xq_icon1.png" alt="" />
          分享
        </div>
      </button>
      
      <div class="box" @click="toJifen(1)">
        <img src="/static/images/room_xq_icon2.png" alt="" />
        <p>充值折扣</p>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getToken,
  getUserPhone
} from "@/utils/auth";
import {
  lineTime,
  toYuyueTime,
} from "@/utils";
import { 
  getRoomDetails
} from "@/api/index";
export default {
  data(){
    return{
      msg:{},
      isIphoneXnum:0,
      roomId:'',
      isMan:false
    }
  },
  onShareAppMessage() {
    return {
      title: `${this.msg.roomName} (${this.msg.roomTypeName})`,
      path: `/pages/room_xq/main?roomId=${this.msg.id}`,
      imageUrl:`${this.msg.roomImg[0]}`
    }
  },
  
  methods: {

    // 跳转团购
    toJifen(num){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/recharge/main?active=${num}`,
      });
    },

    // 跳转时间表
    toTimeSlot(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      let msg1 = {
        name:`${this.msg.roomName}(${this.msg.roomTypeName})`,
        roomId:this.roomId,
        storeName:this.msg.storeName,
        price:this.msg.price,
        storeId:this.msg.storeId,
        lowConsumeTime:this.msg.lowConsumeTime
      }
      wx.navigateTo({
        url: `/pages/time_slot/main?msg=${JSON.stringify(msg1)}`,
      });
    },

    //导航
    onGuideTap() {
      wx.openLocation({
        address: this.msg.address,
        name: this.msg.storeName,
        longitude: +this.msg.longitude,
        latitude: +this.msg.latitude,
        scale: 16
      })
    },

    // 房间图片预览
    previewImage(img) {
      wx.previewImage({
        current: img[0], // 当前显示图片的http链接
        urls: img, // 需要预览的图片http链接列表
      });
    },

    // 获取房间详情
    getDetails(){
      getRoomDetails({roomId:this.roomId}).then(res=>{
        if(res.statusCode == '00000'){
          let changeTime = '2022-11-17 00:00:00';
          let onDay = new Date().getDate();
          let onTime=new Date().getHours()
          let lineOnTime = lineTime();
          this.msg = res.data
          let uesTimeList = this.msg.uesTimeList
          //如果没有预约时间
          if (uesTimeList.length == 0) {
            if (changeTime > onDay) {
              this.msg.showTime = lineOnTime;
              return;
            } else {
              lineOnTime.map((n) => {
                if (n.key < new Date().getHours()) {
                  n.status = 1;
                }
              });
              this.msg.showTime = lineOnTime;
              return;
            }
          }
          //如果存在预约时间
          uesTimeList.map((lt) => {
            let startTime = new Date(lt.startTime).getHours();
            let endTime = new Date(lt.endTime).getHours();
            console.log(onTime); //当前小时
            console.log(startTime); //占用开始时间
            console.log(endTime); //占用结束时间
            if(endTime == 0 || endTime<startTime){
              endTime = 24
              this.isMan = true
            }
            if (new Date().getTime() > new Date(lt.endTime).getTime()) {
              lineOnTime.map((n) => {
                if (n.key < onTime) {
                  n.status = 1;
                }
              });

              // m.showTime = lineOnTime;
              return;
            }

            lineOnTime.map((n) => {
              //被占用开始天>当天
              if (changeTime > onDay) {
                onTime = 0;
                console.log("第二天");
                if (n.key >= startTime && n.key <= endTime) {
                  n.status = 2;
                }
              } else {
                //当前时间>开始时间
                if (onTime >= startTime) {
                  if (n.key < onTime) {
                    n.status = 1;
                  }
                  if (n.key >= onTime && n.key <= endTime) {
                    n.status = 2;
                  }
                } else {
                  if (n.key < onTime) {
                    n.status = 1;
                  }
                  if (n.key >= startTime && n.key <= endTime) {
                    n.status = 2;
                  }
                }
              }
            });
          });
          this.msg.showTime = lineOnTime;

          console.log(this.msg)
        }
      })
    }
  },
  onShow() {
    
  },
  onLoad(options){
    this.roomId = options.roomId
    if(!getToken()){
      wx.login({
        success:(res)=>{
          let code = res.code
          this.$store.dispatch("userLogin", code).then(res=>{
            if(res.statusCode == '00000'){
              this.getDetails()
            }
          })
        }
      })
    }else{
      this.getDetails()
    }
    

    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 14") != -1 ||
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 10;
        }
      },
    });
  },
  onUnload() {
    this.isMan = false
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background: #fff;
  .top_img{
    position: relative;
    .dots{
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      width: 70rpx;
      height: 46rpx;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;
      font-size: 28rpx;
      img{
        width: 30rpx;
        margin-right: 5rpx;
      }
    }
  }
  .room_msg{
    padding:30rpx;
    .msg{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom:1px solid #f7f7f7;
      padding-bottom:30rpx;
      .left{
        width: 70%;
        .name{
          font-weight: bold;
          color:#000;
          font-size:34rpx
        }
        .label_box{
          margin-top:12rpx;
          p{
            display: inline-block;
            margin-right:20rpx;
            font-size:24rpx;
            border:1px solid #788933;
            padding:2rpx 18rpx;
            border-radius: 4rpx;
            color:#788933;
            font-weight: bold;
            &:last-child{
              margin-right:0;
            }
          }
        }
      }
      .right{
        font-size:24rpx;
        color:#333;
        text-align: center;
        img{
          width: 40rpx;
          height: 40rpx;
          margin-bottom:8rpx;
        }
      }
    }
    .price_box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top:10rpx;
      .price{
        display: flex;
        color:#222;
        font-size:24rpx;
        align-items: baseline;
        span{
          font-size:34rpx;
          font-weight: bold;
        }
        .new{
          margin-left:30rpx;
          color:#9A9A9A;
          font-weight: 500;
        }
      }
    }
  }
  .time_slot_box{
    margin:0 30rpx;
    background: #F9F9FB;
    margin-top:10rpx;
    padding:30rpx 24rpx;
    border-radius: 10rpx;
    .title_box{
      display: flex;
      justify-content: space-between;
      margin-bottom:40rpx;
      .title{
        font-size:32rpx;
        font-weight: bold;
      }
      .right {
        display: flex;
        align-items: center;
        div {
          display: flex;
          align-items: center;
          margin-right: 30rpx;
          font-size: 24rpx;
          color: #3E3E3E;
          font-weight: 500;
          &:last-child{
            margin-right: 0;
          }
          p {
            width: 16rpx;
            height: 16rpx;
            border: 1px solid transparent;
            margin-right: 10rpx;
            &.blue {
              background: #3E3E3E;
            }
            &.none {
              background: #F57D26;
            }
            // &.disable {
            //   background: #d2fcfa;
            // }
          }
        }
      }
    }
    .showNum {
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-top: 14rpx;
      text-align: center;
      font-size: 22rpx;
      color: rgb(104, 103, 103);
      width: 88%;
      margin:20rpx auto 0 auto;
      div {
        width: 4.2%;
        height: 15px;
      }
    }
    .time_slot{
      width: 92%;
      margin:0 auto;
      position: relative;
      .nr{
        display: flex;
        align-items: center;
        width: 94%;
        margin:0 auto;
        position: relative;
        .lx{
          width: 10rpx;
          height: 20rpx;
          position: absolute;
          right:-6rpx;
          top:0rpx;
          z-index: 10000;
          // z-index: 50;
          background: red;
          transform: skewX(30deg);
          transform: rotate(-58deg);
        }
        div{
          width: 26rpx;
          height: 10rpx;
          margin-right:-2rpx;
        }
        .noTt {
          background: #9A9A9A;
          text-align: right;
        }
        .isTt {
          background: #FB9F5C;
          text-align: right;
        }
        .noTt1 {
          background: #666666;
          text-align: right;
        }
        .isTt1 {
          background: #F57D26;
          text-align: right;
        }
      }
      .to_nr{
        transform: skewX(-30deg);
        position: relative;
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skewX(30deg);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;  
          border-right: 8rpx solid transparent;  
          border-bottom: 10rpx solid #CF6D26; 
        }
        .sjx_on{
          border-bottom-color:#555;
        }
      }
      .bottom_nr{
        position: relative;
        div {
          transform: skewX(30deg);
        }
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skew(0deg);
          width: 0;
          height: 0;
          border-top: 10rpx solid #CF6D26;
          border-right: 8rpx solid transparent;
          border-left: 8rpx solid transparent;
        }
        .sjx_on{
          border-top-color:#555;
        }
      }
    }
    .showCont {
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 88%;
      margin:0 auto;
      div {
        width: 4.2%;
        height: 24rpx;
      }
      .hasTt {
        background: #788933;
        text-align: right;
      }
      .noTt {
        background: #3e3e3e;
        text-align: right;
      }
      .isTt {
        background: #788933;
        text-align: right;
      }
    }
  }
  .room_jieshao{
    margin:0 30rpx;
    .title_box{
      text-align: center;
      margin-top:40rpx;
      margin-bottom:20rpx;
      .name{
        font-size:38rpx;
        color:#222;
        font-weight: bold;
        margin-bottom:2rpx;
      }
      .line_box{
        display: flex;
        align-items: center;
        justify-content: center;
        .line{
          width: 16rpx;
          height: 1px;
          background: #666666;
        }
        .text_t {
          color:#666666;
          font-size:22rpx;
          margin:0 20rpx;
        }
      }
    }
    .text{
      margin:30rpx 0 24rpx 0;
      color:#333;
      font-size:32rpx;
      font-weight: bold;
      border-bottom:1px solid #F6F6F6;
      padding:0 30rpx 10rpx 30rpx;
    }
    .text1{
      color:#3E3E3E;
      font-size:26rpx;
      line-height: 50rpx;
      padding:0 30rpx;
    }
  }
  .anniu_box{
    position: fixed;
    bottom:0;
    height: 144rpx;
    background: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top:1px solid #D9D9D9;
    .anniu{
      width: 90%;
      height: 96rpx;
      line-height: 96rpx;
      background: #222222;
      color:#fff;
      font-size:30rpx;
      border-radius: 4rpx;
      text-align: center;
    }
  }
  .right_flex{
    position: fixed;
    right:0;
    bottom:260rpx;
    .box{
      width: 164rpx;
      height: 92rpx;
      background: #80A952;
      border-radius: 23px 0px 0px 23px;
      margin-bottom:24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color:#fff;
      font-size:26rpx;
      font-weight: 500;
      img{
        width: 40rpx;
        height: 40rpx;
        margin-right:8rpx;
      }
      p{
        width: 70rpx;
      }
    }
    button::after {
      border: none;
    }
    button{
      background: none;
      padding:0;
      border-radius: 0;
    }
  }
}
</style>